
<div style="POSITION: relative" id="content">
  <h3>使用easyUI 动态改变datagrid的columns</h3>
  <div id="article_content" class="article_content">
    <p>DataGrid 列可以使用'columns' 属性简单的定义,如果你想动态的改变columns,那根本没有问题,改变columns,你可以重新调用datagrid 方法和传递一个新的columns 属性,就o了.</p>
    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 创建DataGrid</h4>
    <p>
    <pre name="code" class="html">&lt;table id=&quot;tt&quot; title=&quot;Frozen Columns&quot; class=&quot;easyui-datagrid&quot; style=&quot;width:550px;height:250px&quot;  
        url=&quot;data/datagrid_data.json&quot;  
        singleSelect=&quot;true&quot; iconCls=&quot;icon-save&quot;&gt;  
&lt;/table&gt;  </pre>
    <pre name="code" class="javascript">$('#tt').datagrid({  
    columns:[[  
        {field:'itemid',title:'Item ID',width:80},  
        {field:'productid',title:'Product ID',width:80},  
        {field:'attr1',title:'Attribute',width:200},  
        {field:'status',title:'Status',width:80}  
    ]]  
});  </pre>
    运行你的web页面,你将看见:
    </p>
    <p><img src="documentation/images/1344565097_7610.png" alt=""></p>
    <p>可是有时候你想改变columns,所以你需要写一些代码:
    <pre name="code" class="javascript">$('#tt').datagrid({  
    columns:[[  
        {field:'itemid',title:'Item ID',width:80},  
        {field:'productid',title:'Product ID',width:80},  
        {field:'listprice',title:'List Price',width:80,align:'right'},  
        {field:'unitcost',title:'Unit Cost',width:80,align:'right'},  
        {field:'attr1',title:'Attribute',width:100},  
        {field:'status',title:'Status',width:60}  
    ]]  
}); </pre>
    记住我们已经定义了其他属性,例如:url,width,height,等等..,我们不需要再一次定义他们,我们定义那些我们需要改变的:
    </p>
    <p><img src="documentation/images/1344565305_1159.png" alt=""></p>
    <h4 style="font-size:16px; color:rgb(204,0,0); margin:10px 0px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left"> 下载EasyUI 示例代码:</h4>
    <div style="font-size:14px; font-family:Arial,Helvetica,'Nimbus Sans L',sans-serif; text-align:left; padding-left:50px"> <a href="http://www.jeasyui.com/tutorial/datagrid/downloads/easyui-datagrid6-demo.zip" target="_blank" class="download-link" style="color:rgb(0,0,255)">easyui-datagrid-demo.zip</a></div>
    <br>
    <br>
    <br>
    <p></p>
    <p style="text-align:left"></p>
    <p><span style="font-family:Arial,Helvetica,Nimbus Sans L,sans-serif"><span style="font-size:14px"><br>
      </span></span></p>
  </div>
</div>
</div>
<SCRIPT type=text/javascript>
	dp.SyntaxHighlighter.ClipboardSwf = 'documentation/js/clipboard.swf'/*tpa=http://jeasyui.com/SyntaxHighlighter/Scripts/clipboard.swf*/;
	dp.SyntaxHighlighter.HighlightAll('code');
</SCRIPT>